/*
  采用Vue的Mixin特性编写一个用于实际渲染的Vue模板的接口类
  用于定义组件运行时组件实例必须拥有的属性及方法
  CIF Runtime内部仅会调用此接口类中的函数
  全局主题监听
  组件交互器用来监听数据变化
*/

import { setPx } from '@CIF/Utils/util';
import _ from 'lodash';

/**
 * mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
 */
const mixins = {
	props: {
		beforeMountHook: [Function, undefined]
	},
	data() {
		return {
			__shouldResetStyle: false
		};
	},
	beforeMount() {
		this.beforeMountHook && this.beforeMountHook(this);
	},
	beforeUpdate() {
		if (_.isEmpty(this.$el.innerHTML) && this.$data.__shouldResetStyle === false) {
			this.$data.__shouldResetStyle = true;
		}
	},
	updated() {
		if (this.$data.__shouldResetStyle === true) {
			this.$el.style.width = setPx(this.width);
			this.$el.style.height = setPx(this.height);
			this.$data.__shouldResetStyle = false;
		}
	}
};

const patchComponent = (vueDefine) => {
	// if (vueDefine.mixins) {
	// 	vueDefine.mixins.push(mixins);
	// } else {
	// 	vueDefine.mixins = [mixins];
	// }
	console.log('lllllll', vueDefine);
};

export default patchComponent;
